import { mapState, mapActions } from 'vuex';
import * as api from '../../api/department';

let currentDepartment = {};

export default {
    data () {
        return {
            visible: false,
            params: {},
        };
    },
    computed: {
        ...mapState('department', [
            'departmentList',
            'managerList',
        ]),
        tree () {
            const dealData = (data, isFirst) => {
                const result = [];
                for (const item of data) {
                    if (isFirst && item.pid) {
                        continue;
                    }
                    // 自己的id
                    const id = item.id;
                    // 去data中找有没有自己的孩子（d.pid === id） >>> filter
                    const children = this.departmentList.filter((d) => d.pid === id);
                    item.departments = dealData(children, false);
                    result.push(item);
                }
                return result;
            }

            return dealData(this.departmentList, true);
        },
        tree2 () {
            const dealData = (data) => {
                return data.map(d => {
                    return {
                        ...d,
                        departments: dealData( this.departmentList.filter((dd) => dd.pid === d.id) ),
                    };
                });
            }

            return dealData( this.departmentList.filter(d => !d.pid) );
        },
    },
    methods: {
        ...mapActions('department', [
            'updateDepartmentList',
            'updateManagerList',
        ]),
        onOperatorClick (cmd, data) {
            currentDepartment = data;
            switch (cmd) {
                case 'ADD_CHILD_DEPARTMENT':
                    // 打开新增弹窗
                    this.open();
                    break;
                case 'EDIT_DEPARTMENT':
                    // 打开编辑弹窗
                    this.open();
                    // 返显
                    this.params = currentDepartment;
                    break;
                case 'DELETE_DEPARTMENT':
                    this.onDelete(data.id);
                    break;

                default:
                    break;
            }
        },
        open () {
            this.visible = true;
        },
        onDelete (id) {
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(async () => {
                const res = await api.removeDepartment(id);
                this.$message({
                    message: res.data.message,
                    type: res.data.success ? 'success' : 'error',
                });
                res.data.success && this.updateDepartmentList();
            }).catch(() => {
                // 点击取消需要干的事
            });
        },
        // 表单确认事件
        async onOk () {
            let res;
            // 用this.params判断是否正在编辑（因为编辑是有返显的）
            if (this.params.id) {
                res = await api.editDepartment(this.params, currentDepartment.id);
            } else {
                res = await api.addChildDepartment({
                    ...this.params,
                    pid: currentDepartment.id,
                });
            }

            this.$message({
                message: res.data.message,
                type: res.data.success ? 'success' : 'error',
            });
            res.data.success && this.updateDepartmentList();
            this.visible = false;
        },
    },
    mounted () {
        this.updateDepartmentList();
        this.updateManagerList();
    },
}
